<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" size="full" :close-on-press-escape="false" :before-close="off" :show-close="true" :top="dialog_margin_top">
		<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
				<el-form :inline="true">
				  	<el-col :span="24">
				  		<div class="grid-content bg-purple-dark"></div>
						<el-form-item lable="标的/责任代码"  label-width="150px" :span="3">
							<el-input v-model="formData.itemcode" size="small" placeholder="标的/责任代码"></el-input>
						</el-form-item>
						<el-form-item lable="标的/责任名称" label-width="150px" :span="3">
							<el-input v-model="formData.itemcname" size="small" placeholder="标的/责任名称"></el-input>
						</el-form-item>
						<el-form-item lable="是否有效" label-width="150px" :span="3">
							<el-select v-model="formData.validstatus" placeholder="是否有效" disabled size="small">
								<el-option v-for="item in validOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="queryData()" icon="search">查询</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" @click="reset()">
								<i class="fa fa-undo"></i>
								重置
							</el-button>
						</el-form-item>
				  	</el-col>

					<el-form-item>
						<el-button size="small" type="warning" @click="openAddDialog()" icon="plus">新增责任</el-button>
					</el-form-item>
					<!-- <el-form-item>
						<el-button size="small" type="default" @click="">
							<i class="fa fa-search-plus"></i>
							查看日志
						</el-button>
					</el-form-item> -->
				</el-form>
			</el-col>

			<el-table :data="tableData" ref="multipleTable" v-loading="loading" element-loading-text="处理中......" border style="width: 100%;" :height="tableHeight" :highlight-current-row="true" @selection-change="rowSelected" @row-click="toggleRow">
			 	<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="itemcode" label="标的/责任代码" width="160"></el-table-column>
				<el-table-column prop="itemcname" label="标的/责任中文名称" show-overflow-tooltip min-width="240"></el-table-column>
				<el-table-column prop="itemename" label="标的/责任英文名称" show-overflow-tooltip min-width="240"></el-table-column>
				<el-table-column prop="riskcode" label="险种" width="80"></el-table-column>
				<el-table-column prop="startdate" label="生效日期" width="150" :formatter="dateFormater"></el-table-column>
				<el-table-column prop="enddate" label="失效日期" width="150" :formatter="dateFormater"></el-table-column>
				<el-table-column prop="validstatus" label="是否有效" width="120" :formatter="validFormater"></el-table-column>
			</el-table>

			<div class="block" style="float:right">
			    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			      :current-page="formData.currentPage"
			      :page-sizes="[15, 30, 45]"
			      :page-size="formData.pageSize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-row type="flex" :span="24" justify="space-around">
					<el-col :span="18">
						<el-table :data="formData.selectedRows" border style="width: 100%;text-align:left;" :highlight-current-row="true">
							<el-table-column prop="itemcode" label="责任代码" width="120"></el-table-column>
							<el-table-column prop="itemcname" label="责任名称" show-overflow-tooltip min-width="180"></el-table-column>
							<el-table-column prop="owneritemcode" label="父级责任" min-width="120">
							      <template scope="props">
							      <span style="color : red" v-if="props.row.id==='1'">*</span>
								<input v-if="props.row.id==='1'" :id="props.row.itemcode" class="owneritemcode" size="small" @click="openOwnerItemDialog(props.row)" readonly></input>
							      </template>
							</el-table-column>
							<el-table-column prop="ownerflag" label="归属类型" min-width="120">
							      <template scope="props">
								        <input v-if="props.row.riskcode==='2724'" :id="'ownerflag'+props.row.itemcode" class="ownerflag" size="small" @click="openOwnerFlagDialog(props.row)" readonly></input>
							      </template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<br>
				<div align="center">
					<el-button @click="off()">取消</el-button>
			   		<el-button type="warning" @click="linkItem()"  :disabled="isSelectNull">关联</el-button>
				</div>
		  	</span>
		</el-dialog>

		<ItemAdd v-if="showAddDialog"></ItemAdd>
		<OwnerItemCodeSelect v-if="showOwnerItemSelect"></OwnerItemCodeSelect>
		<OwnerFlagSelect v-if="showOwnerFlagSelect"></OwnerFlagSelect>
	</div>

</template>

<script>
import ItemAPI from "../../../../js/production/item/itemAPI"
import dateUtil from "../../../../common/js/dateUtil"
import ItemAdd from "../../item/dialog/ItemAdd"
import OwnerItemCodeSelect from "./OwnerItemCodeSelect"
import OwnerFlagSelect from "./OwnerFlagSelect"
import Utils from"../../../../js/production/utils";
export default {
  components : {
  	ItemAdd,
  	OwnerItemCodeSelect,
  	OwnerFlagSelect,
  },
  data () {
    	return {
    		formData: {
    		       currentPage: 1,
	                    pageSize: 15,
	                    itemcode: '',
	                    itemcname: '',
	                    itemename: '',
	                    validstatus: '1',
	                    kind: {},
	                    selectedRows: [],
    		},
    		tableData: [],
    		total: 0,
		riskOptions: [],
		validOptions: [{
			label : '1-有效',
			value: '1'
		},{
			label : '0-无效',
			value: '0'
		}],
		title:'',
		isSortRequest: false,	//是否请求
		showAddDialog: false,
		showOwnerItemSelect: false,
    showOwnerFlagSelect: false,
		tableHeight: 0,
		dialogVisible: true,
		dialog_margin_top: '2%',
		isSelectNull: true,
		loading : false,
		currentItemCode: '',
		tempId: '',
		tempItemCode: '',
		tempOwnerFlagId: '',
		tempOwnerFlag: '',
	}
  },
  computed: {
  	selectedRows() {
  		return this.formData.selectedRows;
  	}
  },
  watch: {
  	selectedRows(curVal, oldVal) {
  		if (curVal.length < 1) {
  			this.isSelectNull = true;
  		} else {
  			this.isSelectNull = false;
  		}
  	}
  },
  mounted() {
  	this.tableHeight = Utils.getScreenHeight()*0.6;
  	this.formData.kind = this.$parent.selectedRows[0];
  	this.title = '【条款-' + this.formData.kind.kindcode + '-' + this.formData.kind.kindcname + '】可关联标的/责任如下';
  	this.queryData();
  	let vm = this;
  	document.onkeydown = function(e) {
  		if(e.keyCode == 13) {
  			vm.queryData();
  		}
  	}
  	setInterval(function(){
      for (let i = 0; i < vm.formData.selectedRows.length; i++) {
        if (vm.tempId == vm.formData.selectedRows[i].itemcode) {
          $('#' + vm.tempId).val(vm.tempItemCode);
          vm.formData.selectedRows[i].owneritemcode = vm.tempItemCode;
        }
      }
      vm.tempId = '';
      vm.tempItemCode = '';
      for (let i = 0; i < vm.formData.selectedRows.length; i++) {
        if (vm.tempOwnerFlagId == 'ownerflag' + vm.formData.selectedRows[i].itemcode) {
          $('#' + vm.tempOwnerFlagId).val(vm.tempOwnerFlag);
          vm.formData.selectedRows[i].ownerflag = vm.tempOwnerFlag;
        }
      }
      vm.tempOwnerFlagId = '';
      vm.tempOwnerFlag = '';
    }, 500);
  },
  methods: {
		queryData() {
			ItemAPI.query(this);
		},
		openAddDialog() {
			ItemAPI.openAddDialog(this);
		},
		openOwnerItemDialog(row) {
  			this.currentItemCode = row.itemcode;
  			this.showOwnerItemSelect = true;
  		},
		openOwnerFlagDialog(row) {
  			this.currentItemCode = row.itemcode;
  			this.showOwnerFlagSelect = true;
  		},
		rowSelected(rows,row) {
			this.formData.selectedRows = rows;
		},
		toggleRow(row) {
			this.$refs.multipleTable.toggleRowSelection(row);
		},
		handleSizeChange(val) {
			this.formData.pageSize = val;
			ItemAPI.query(this);
		},
		handleCurrentChange(val) {
			this.formData.currentPage = val;
			ItemAPI.query(this);
		},
		dateFormater(row,  column) {  
			var  date  =  row[column.property];            
			if  (date  ==  undefined)  {               
				return  "";            
			}  
			return dateUtil.getDateyMd(date);
		},
		validFormater(row,  column) {  
			var  valid =  row[column.property];            
			if  (valid ==  undefined)  {               
				return  "";            
			}  
			if (valid == 1) {
				return "有效";
			}
			if (valid == 0) {
				return "无效";
			}
		},
		reset() {
			this.formData.itemcode = '';
			this.formData.itemcname = '';
			this.formData.currentPage = 1;
			ItemAPI.query(this);
		},
		off() {
			this.$parent.showItemConfigDialog = false;
		},
		linkItem() {
			let vm = this;
			let isLink = true;
			$('.owneritemcode').each(function() {
				if($(this).val() == '') {
					vm.$message({type: 'error',message: '父级责任不能为空！'});
					isLink = false;
					return false;
				}
			});
			if(isLink) {
				ItemAPI.linkItem(this);
			}
		},
  }
}
</script>
